<template>
    <div id="listDiv">
        <ul id="queryList">
            <li v-for="(item,index) in getItemList" :key="index">
                <div class="imgDiv">    
                    <img :src="getLogoURL()" >  
                </div>
                <div class="contentDiv">
                    <p><span>{{item.packageName}}</span></p>
                    <p>{{item.packageType | packageType}}</p>
                    <p>{{item.version}}</p>
                    <p>{{item.created}}</p>
                </div>
                <div class="operatorDiv">    
                    <span @click="confirmDelete(item.id,index)">删除</span>
                    <span v-if="isPackages"><a @click=downloadPackage(item.packageUrl)>下载</a></span>
                    <span v-if="isPackageLogs">查看</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script type="text/javascript">
import packagingUtil from '../packagingUtil.js'
export default {
    props: [''],
    data () {
        return {
        }
    },
    methods: {
        deleteItem (id, index){
            var deleteURL = ''
            var self = this;
            if(this.$store.state.activeOption == 'packageManagement'){
                deleteURL = '/magicflu/service/s/' + this.$store.state.spaceId + '/packages/' + id;
            }else if(this.$store.state.activeOption == 'packageLogs'){
                deleteURL = '/magicflu/service/s/' + this.$store.state.spaceId + '/packagelogs/' + id;
            }
            this.$axios({
                url: deleteURL,
                method: 'delete',
                data: ""
            }).then(function(response) {
                packagingUtil.myAlert("删除成功","提示",self);
                self.$store.commit("updatePackageOrLogList", index);
                self.$store.commit("updatePackageOrLogTotalcount", 1);
            }).catch( function(response) {
                console.log(response)
            });
        },
        confirmDelete(id, index){
             packagingUtil.myConfirmBox("您确定要删除该包吗？","提示",()=>{this.deleteItem (id, index)},this);
        },
        getLogoURL(){
            return "/magicflu/buildpackage/target/" + this.$store.state.spaceId + "/" + this.$store.state.productInfo.id + "/logo/newaboutlogo.png?t=" + new Date().getTime();
        },
        downloadPackage(url){
            //packagingUtil.myAlert("温馨提示：为了防止下载的包被360，金山毒霸等杀毒软件拒绝，建议您将正式使用的包上传360，金山毒霸等网站进行验证","提示",this,()=>{window.location=url});
            window.location=url;
        }
        
    },
    filters: {
        packageType: function (value) {
            var type = value.split("#")[1];
            var pType = value.split("#")[0];
            if(type == 'preview'){
                if (pType == 'install') return '安装包(预览包)';
                else return '升级包(预览包)';
            }else if(type == 'mfu_full'){
                return '升级包(MFU)';
            } else if(type == 'full') {
                return "离线安装包"
            } else if(type == 'online') {
                return '在线安装包'
            } else{
                if (pType == 'install') return '安装包(正式包)';
                else return '升级包(正式包)';
            }
        },
        logoUrl: function (productId ,spaceId){
            
        }
    },
    computed : {
        getItemList (){
            //return 5;
            if(this.$store.state.activeOption == 'packageManagement'){
                return this.$store.state.packages.entry;
            }else if(this.$store.state.activeOption == 'packageLogs'){
                return this.$store.state.packageLogs.entry;
            }
            
        },
        isPackages (){
            return this.$store.state.activeOption == 'packageManagement';
        },
        isPackageLogs (){
            return this.$store.state.activeOption == 'packageLogs';
        }
    }
       

}
</script>

<style scoped>
    #listDiv{
        text-align: center;
        height: calc(100vh - 220px);
        overflow: auto;
    }
    #queryList{
        width: 90%;
        height: 99%;
        text-align: center;
        display: inline-block;
    }
    li{
        width: 320px;
	    height: 170px;
	    background-color: #ffffff;
	    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
	    border-radius: 4px;
	    border: solid 1px #e0e0e0;
        float: left;
        margin:0 20px 20px 0; 
        list-style: none;
        display: inline;
    }
    div.imgDiv{
        float: left;
        overflow: hidden;
        border-radius: 4px 4px 0 0;
        height: 125px;
    }
   
    div.imgDiv>img{
        width: 86px;
	    height: 86px;
        margin: 15px;
    }

    div.contentDiv{
        float: left;
        height: 140px;
        width: 200px;
        text-align: left;
    }
    div.contentDiv>p{
        height: 16px;
        line-height: 16px;
        margin-left: 5px;
    }
    div.contentDiv>p:first-child{
        height: 24px;
        margin: 15px 5px;
    }
    div.contentDiv>p{
        font-family: MicrosoftYaHei;
        font-size: 12px;
        color: #a8a8a8;
    }
    div.contentDiv>p>span{
        font-family: MicrosoftYaHei;
        font-size: 16px;
        color: #333333;
    }
    .operatorDiv>span{
        display: block;
        width: 158px;
        height: 30px;
        border: solid 1px #e0e0e0;
        float: left;
        text-align: center;
        font-size: 16px;
        line-height: 30px;
        cursor: pointer;
    }
    .operatorDiv>span:first-child{
        color: #e00000;
    }
    .operatorDiv>span:last-child{
        color: #333333;
    }
    .operatorDiv>span>a{
        text-decoration: none;
        color: blue;
    }
    @media screen and (max-width: 1023px){
   
    }
    @media screen and (min-width:1024px) and (max-width: 1439px){
        
    }
    @media screen and (min-width:1440px) and (max-width:1599px){
        
    }
    @media screen and (min-width:1600px) and (max-width:1919px){
    
    }
</style>
